<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人资料</title>
    <link rel="stylesheet" href="${request.contextPath}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/plugins/ima_up/css/amazeui.min.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/plugins/ima_up/css/amazeui.cropper.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/plugins/ima_up/css/custom_up_img.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/plugins/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${request.contextPath}/lib/plugins/datepicker/datepicker3.css">

    <script src="${request.contextPath}/lib/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script src="${request.contextPath}/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="${request.contextPath}/lib/bootstrap/js/bootstrapValidator.js"></script>
    <script src="${request.contextPath}/lib/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="${request.contextPath}/lib/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script type="text/javascript" src="${request.contextPath}/lib/plugins/layer/layer.js"></script>
    <script src="${request.contextPath}/js/diy_tips.js"></script>
    <style type="text/css">
        .up-img-cover {
            width: 100px;
            height: 100px;
        }

        .up-img-cover img {
            width: 100%;
        }
        .person-center{
            width: 500px;
            padding-top: 50px;
            padding-bottom: 20px;
            padding-left: 20px;
            padding-right: 20px;
            border: 1px solid #e0e0e0;
        }
        .line-div{
            margin-top: 20px;
            text-align: left;
        }
        .person-title{
            height: 100px;line-height: 100px;
            font-family: Microsoft YaHei;
            font-size: 32px;
        }
    </style>
    <script type="text/javascript">
        var contextPath = '${request.contextPath}';
    </script>
</head>
<body>

<div align="center">
    <div class="person-title">个人资料</div>
    <div class="person-center">
        <div align="center">
            <div class="up-img-cover" id="up-img-touch">
                <!--<img class="am-circle" alt="点击图片上传" src="${request.contextPath}/images/hu.jpg"-->
                     <!--data-am-popover="{content: '点击上传', trigger: 'hover focus'}">-->
                <!--<img class="am-circle" alt="点击图片上传" src="${request.contextPath}/imageManage/getImage?rootFile=head&id=${userInfo.uid}&fileName=head.jpg" onerror="this.src='${request.contextPath}/images/head.png'"-->
                     <!--data-am-popover="{content: '点击上传', trigger: 'hover focus'}">-->
                <img class="am-circle" alt="点击图片上传" src="${userInfo.headImg!}?rand='javascript:Math.random()'" onerror="this.src='${request.contextPath}/images/head.png'"
                     data-am-popover="{content: '点击上传', trigger: 'hover focus'}">
            </div>
        </div>
        <div class="line-div" style="margin-top: 50px;">
            <label for="nickName">昵称</label>
            <input type="text" class="form-control" id="nickName" name="nickName" value="${userInfo.nickName!}"/>
        </div>

        <div class="line-div" >
            <label for="email">邮箱地址</label>
            <input type="text" class="form-control" id="email" name="email" value="${userInfo.email!}"/>
        </div>

        <div class="line-div">
            <label for="phone">手机号码</label>
            <input type="text" class="form-control" id="phone" name="phone" value="${userInfo.phone!}"/>
        </div>

        <div class="line-div">
            <label for="birthday">生日</label>
            <div class="input-group">
                      <span style="position: relative; z-index: 1080;">
                      	<input class="form_datetime form-control" style="z-index: 1080; " id="birthday" name="birthday"
                               type="text" value="${userInfo.birthday!}" readonly>
                      </span>
                <span class="input-group-addon">
                      	<i class="fa fa-calendar"></i>
                      </span>
            </div>
        </div>
        <div class="line-div">
            <label for="sex">性别</label>
            <select class="form-control" id="sex" name="sex" data-bv-field="country" ${userInfo.sex!}>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>
        <div style="margin-top: 20px;" align="right">
            <button type="button" class="btn btn-primary" onclick="updateUser()">保存</button>
        </div>
    </div>
</div>
<div><a style="text-align: center; display: block;" id="pic"></a></div>

<!--图片上传框-->
<div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog up-frame-parent up-frame-radius">
        <div class="am-modal-hd up-frame-header">
            <label>修改头像</label>
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd  up-frame-body">
            <div class="am-g am-fl">
                <div class="am-form-group am-form-file">
                    <div class="am-fl">
                        <button type="button" class="am-btn am-btn-default am-btn-sm">
                            <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                        </button>
                    </div>
                    <input type="file" id="inputImage">
                </div>
            </div>
            <div class="am-g am-fl">
                <div class="up-pre-before up-frame-radius">
                    <img alt="" src="" id="image">
                </div>
                <div class="up-pre-after up-frame-radius">
                </div>
            </div>
            <div class="am-g am-fl">
                <div class="up-control-btns">
                    <span class="am-icon-rotate-left" onclick="rotateimgleft()"></span>
                    <span class="am-icon-rotate-right" onClick="rotateimgright()"></span>
                    <span class="am-icon-check" id="up-btn-ok" url="${request.contextPath}/soa/user/upImg"></span>
                </div>
            </div>

        </div>
    </div>
</div>

<!--加载框-->
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">正在上传...</div>
        <div class="am-modal-bd">
            <span class="am-icon-spinner am-icon-spin"></span>
        </div>
    </div>
</div>

<!--警告框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">信息</div>
        <div class="am-modal-bd" id="alert_content">
            成功了
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
<!--<script src="${request.contextPath}/lib/plugins/ima_up/js/jquery.min.js" charset="utf-8"></script>-->
<script src="${request.contextPath}/lib/plugins/ima_up/js/amazeui.min.js" charset="utf-8"></script>
<script src="${request.contextPath}/lib/plugins/ima_up/js/cropper.min.js" charset="utf-8"></script>
<script src="${request.contextPath}/lib/plugins/ima_up/js/custom_up_img.js" charset="utf-8"></script>
<script>
    $(document).ready(function(){
        //加载时间控件
            $('.form_datetime').datepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                weekStart: 1,
                autoclose: true,
                forceParse: false

            });
    });
    //保存
    function updateUser() {
        var data = {
            nickName: $("#nickName").val(),
            sex: $("#sex").val(),
            email: $("#email").val(),
            phone: $("#phone").val(),
            birthday: $("#birthday").val()
        };

        $.ajax({
            url: contextPath + "/soa/manage/update",
            data: data,
            type: "post",
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.status == 0) {
                    info(result.msg);
                } else if (result.status == 1) {
                    warning(result.msg);
                }

            },
            error: function () {
                warning('修改失败!');
            }
        });

    }
</script>
</body>
</html>
